<template>
  <view class="my-container">
    <!-- 用户信息区域 -->
    <view class="user-header">
      <view class="user-avatar">
        <uni-file-picker
          v-model="headValue"
          disable-preview
          :del-icon="false"
          :limit="1"
          return-type="object"
          :imageStyles="imageStyles"
          @select="selectHeadImg"
        ></uni-file-picker>
      </view>
      <view class="user-info">
        <view class="user-name">{{ userInfo?.realName || "用户名" }}</view>
      </view>
      <view class="sign-btn" @click="signIn">
        <text>签到</text>
      </view>
    </view>

    <!-- 功能菜单列表 -->
    <view class="menu-list">
      <view class="menu-item" @click="navigateTo('/pages/myInfo/myInfo')">
        <view class="menu-icon blue">
          <image
            class="iconfont"
            src="/static/images/my/gerenxinxi.png"
          ></image>
        </view>
        <view class="menu-title">个人信息</view>
        <view class="menu-arrow">
          <text class="arrow-icon">›</text>
        </view>
      </view>

      <view
        class="menu-item"
        @click="navigateTo('/pages/learningProgress/learningProgress')"
      >
        <view class="menu-icon light-blue">
          <image
            class="iconfont"
            src="/static/images/my/wodedingdan.png"
          ></image>
        </view>
        <view class="menu-title">我的订单</view>
        <view class="menu-arrow">
          <text class="arrow-icon">›</text>
        </view>
      </view>

      <view
        class="menu-item"
        @click="navigateTo('/pages/myCertificate/myCertificate')"
      >
        <view class="menu-icon orange">
          <image
            class="iconfont"
            src="/static/images/my/wodezhengshu.png"
          ></image>
        </view>
        <view class="menu-title">我的证书</view>
        <view class="menu-arrow">
          <text class="arrow-icon">›</text>
        </view>
      </view>

      <view
        class="menu-item"
        @click="navigateTo('/pages/applyTeacher/applyTeacher')"
		v-if="userInfo?.isTeacher !== 1"
      >
        <view class="menu-icon pink">
          <image
            class="iconfont"
            src="/static/images/my/shenqingjiaoyuan.png"
          ></image>
        </view>
        <view class="menu-title">申请教员</view>
        <view class="menu-arrow">
          <text class="arrow-icon">›</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, reactive, computed } from "vue";
import { uploadImg, globalData } from "@/utils/util";
import api from "@/utils/api.js";
import { onShow, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
import { getUserInfo, setUserInfo } from "@/utils/index";

// 响应式数据
const userInfo = ref(); 
const imageStyles = {
  width: 60,
  height: 60,
  border: {
    radius: "50%",
  },
};

const headValue = computed(() => {
  const headImg = userInfo.value?.headImg;
  return headImg
    ? [{ url: globalData.OSS_URL + headImg }]
    : [{ url: "/static/images/avatar.png" }];
});

// 修改头像
async function selectHeadImg(e) {
  if (!userInfo.value) {
    uni.navigateTo({ url: "/pages/login/login" });
    return;
  }
  const file = e.tempFiles[0];
  if (file) {
    await uploadImg(file).then((result) => {
      let userInfo = uni.getStorageSync("userInfo");
      let data = Object.assign(userInfo, { headImg: result });
      api.myInfoUpdate(data).then((res) => {
        if (res.code === 0) {
          setUserInfo(data);
          uni.showToast({
            title: "上传成功",
            icon: "success",
          });
        }
      });
    });
  }
}

// 导航到指定页面
async function navigateTo(url) {
  if (!userInfo.value) {
    uni.navigateTo({ url: "/pages/login/login" });
    return;
  }
  uni.navigateTo({ url });
}

// 签到
function signIn() {
  uni.showToast({
    title: "签到成功",
    icon: "success",
  });
}

const fetchUserInfo = async () => {
  try {
    const res = await getUserInfo();
    userInfo.value = res;
    console.log("userInfo", userInfo.value);
  } catch (error) {
    console.log(error);
  }
};

// 页面显示时获取用户信息
onShow(() => {
  console.log("onShow");
  fetchUserInfo();
});

// 分享给朋友
onShareAppMessage(() => {
  return {
    title: '分享一个页面',
    path: '/pages/my/my'
  };
});

// 分享到朋友圈
onShareTimeline(() => {
  return {
    title: '分享一个页面',
    query: '' // 如果有参数可以带上
  };
});
</script>

<style lang="scss">
.my-container {
  min-height: 100vh;
  background-color: #f6f8fa;
  padding-bottom: 30rpx;
}

.user-header {
  background-color: #fff;
  padding: 40rpx 30rpx;
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 20rpx;
}

.user-avatar {
  //   width: 120rpx;
  //   height: 120rpx;
  //   border-radius: 50%;
  //   overflow: hidden;
  //   background-color: #f6f8fa;
  //   .file-picker__box,
  //   .uni-file-picker__container {
  //     width: 120rpx;
  //     height: 120rpx;
  //     border-radius: 50%;
  //     overflow: hidden;
  //   }
  //   .file-picker__box-content {
  //     height: 120rpx;
  //     width: 120rpx;
  //     margin: 0;
  //     .file-image {
  //       width: 120rpx;
  //       height: 120rpx;
  //       border-radius: 50%;
  //       overflow: hidden;
  //     }
  //   }
}

.user-info {
  margin-left: 30rpx;
  flex: 1;
}

.user-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.sign-btn {
  position: absolute;
  right: 30rpx;
  top: 50%;
  transform: translateY(-50%);
  color: #2cbaff;
  font-size: 28rpx;
  padding: 10rpx 20rpx;
  border: 1px solid #2cbaff;
  border-radius: 30rpx;
}

.menu-list {
  background-color: #fff;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  position: relative;

  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 30rpx;
    right: 30rpx;
    height: 1px;
    background-color: #f5f5f5;
  }

  &:last-child::after {
    display: none;
  }

  &:active {
    background-color: #f9f9f9;
  }
}

.menu-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20rpx;

  .iconfont {
    width: 50rpx;
    height: 50rpx;
  }
}

.menu-title {
  flex: 1;
  font-size: 30rpx;
  color: #333;
}

.menu-arrow {
  color: #ccc;

  .arrow-icon {
    font-size: 50rpx;
    font-weight: bold;
  }
}
</style>
